<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>图片</title>
    <link rel="stylesheet" href="./css/img.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <script src="https://cdn.bootcss.com/howler/2.1.1/howler.js"></script>
</head>

<body>
    <div class="swiper-button-prev" id="_left"></div>
    <div class="swiper-button-next" id="_right"></div>

    <!-- <audio onended="video()" id="fry_audio" controls="controls" style="display: none;">
        <source src="http://oss.sooc.net/audio/20190116/2406450858114052992acc66f8dc017f.mp3" />
    </audio> -->
    <div class="wrap__body--height">
        <div class="swiper-container">
            <div class="swiper-wrapper" id="imgBody">
                <!-- <div class="swiper-slide  img__id">
                </div>
            </div>
           <-->
            </div>
        </div>
        <div class="load__start" onclick="playMusic()">
            <div class="load__start--triangle"></div>
        </div>
        <div class="load__start--stop" onclick="playMusic()" style="display:none">
            <div class="stop">▐▐</div>
        </div>

</body>
<script src="./js/arr.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    let domHtml = "";
    for (let i = 0; i < arr[0].pageList.length; i++) {
        domHtml = domHtml + "<div class='swiper-slide  img__id' style='background:url(  " + arr[0].pageList[i].imgUrl + "   ) no-repeat center center'>" +
            "</div>"
    }
    $("#imgBody").html(domHtml)
</script>
<script src="./js/swiper.min.js"></script>
<script>
    var sounds =arr[0].pageList.map(item=> ({
            howl:new Howl({
                src:[item.voiceUrl]
            })
    }))
    var timer = null;    
    var page = 0; // 当前页
    var voice
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
        }, on: {
            slideChangeTransitionStart: function () {
                console.log(this);
                clearTimeout(timer);
                // 淡出当前声音
                sounds[this.previousIndex].howl.fade(1, 0, 500);
                sounds[this.previousIndex].howl.play();
                timer = setTimeout(() => {
                    sounds[this.previousIndex].howl.stop();
                }, 100);
                // 淡入下一首声音
                sounds[this.activeIndex].howl.play()
                sounds[this.activeIndex].howl.fade(0, 1, 500); 
                player && player.off();
                autoNext(sounds[this.activeIndex].howl)
                page = this.activeIndex;
                $(".load__start").hide();
            },
        },
    });

</script>
<script src="./js/main.js"></script>

</html>